<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>

<div id="app" v-clock>
    <h2>问卷调查</h2>
    <p>
        <!--
        vue是mvvm框架，vue的核心之一就是双向数据绑定
        v-model属性是使用在表单元素中的，作用是实现表单和数据的双向绑定
        用户输入的值变化了,那么对应的data(name/sex/hobby/native)也会随之改变
        -->
        姓名：<input type="text" v-model="name">
    </p>
    <p>
        性别：
        <!-- radio 单选框, value设置默认值 -->
        <input type="radio" name="sex" value="男" v-model="sex">男
        <input type="radio" name="sex" value="女" v-model="sex">女
    </p>
    <p>
        爱好：
        <!-- checkbox 复选框 -->
        <input type="checkbox" name="hobby" value="打篮球" v-model="hobby">打篮球
        <input type="checkbox" name="hobby" value="跳舞" v-model="hobby">跳舞
        <input type="checkbox" name="hobby" value="读书" v-model="hobby">读书
    </p>
    <p>
        籍贯：
        <select name="native" id="" v-model="native">
            <option value="河北">河北</option>
            <option value="河南">河南</option>
            <option value="山东">山东</option>
            <option value="山西">山西</option>
            <option value="湖南">湖南</option>
            <option value="湖北">湖北</option>
        </select>
    </p>
    <p>
        您填写的表单内容为：姓名：{{name}}，性别：{{sex}}，爱好：{{hobby}}，籍贯：{{native}}
    </p>
    <button @click="submit">提交</button>
</div>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            name: '',
            sex: '男',
            hobby: [],
            native: '河北'
        },
        methods: {
            submit() {
                //汇总信息提交到后端
                let obj = {
                    name: this.name,
                    sex: this.sex,
                    hobby: this.hobby,
                    native: this.native
                }
                //this.$http.post('', )
                this.$
                console.log(obj)
            }
        }
    })
</script>
</body>
</html>